<template>
 <div class="header">
    <div class="info">确认订单</div>
 </div>
  <div class="site">
   <h3>订单配送至：</h3>
   <h2><pre>河南师范大学（平原湖校区）             ></pre></h2>
   <h3>XXX先生  123456789</h3>
  </div>
  <div class="informantion">
    <div class="label">万家饺子（软件园E18店）</div>
  </div>
  <div class="commodityInfo">
    <div class="one">
        <img src="../img/sp01.png" alt="">
        <div class="price"><pre>纯肉鲜肉（水饺）x2                      ￥15</pre></div>
    </div>
    <div class="one">
        <img src="../img/sp02.png" alt="">
        <div class="price"><pre>纯肉鲜肉（水饺）x1                      ￥16</pre></div>
    </div>
    <div class="delivery"><pre>配送费                                           ￥3</pre></div>
  </div>
  <div class="bottom">
    <div class="left">￥49</div>
    <div class="right" @click="topay()">去支付</div>
  </div>
</template>
<style>
template{
    margin: 0 auto;
}
.header{
    position: relative;
}
.info{
    text-align: center;
    width: 100%;
    height: 120px;
    background-color: #0097ff;
    color: #ffffff;
    font-size: 40px;
    position: fixed;
}
.site{
    background-color: #0097ff;
    width: 100%;
   
    color: #ffffff;
}

  

.label{
    width: 100%;
    height: 130px;
    font-size: 30px;
    border-bottom: #dddddd 1px solid;
    text-align: left;
    color: #666666;
}
.one{
    width: 100%;
    height: 160px;
    font-size: 30px;
    color: #666666;
    display: flex;
    align-items: center;
    
}
.delivery{
    font-size: 30px;
    color: #666666;
    text-align: left;
    margin-bottom: 200px;
}

.bottom{
    display: flex;
   
}
.left{
    text-align: center;
    font-size: 40px;
}
</style>
<script>
export default{
    methods:{
     topay(){
        this.$router.push({path:'/PayPage'});
     }
    }
}
</script>